<template>
    <div id="goodsDetail" class="goods_detail_page">
        <div v-if="goodData.id">
			<header>
				<img :src="goodData.banner" alt="" />
			</header>
			<div class="panel_info">
				<p class="title">{{goodData.name}}</p>
				<span>{{goodData.description}}</span>
			</div>
			<div class="goods_infomation mb10">
				<p class="qh_yellow r12">【产品介绍】</p>
				<div v-html="goodData.instruction" ></div>
			</div>
			<div class="panel_description">
				<img v-for="item in goodData.illustrations" class="lazyload" :src="item"  alt=""> 
			</div>

			<div class="add_goods">
				<router-link to="/mall/cart" >
				<div class="cart" id="cart_preview">
					<i class="num" id="cartNum" v-if="cartCount>0">{{cartCount}}</i>
					<span class="icon-shopping"></span>
				</div>
				</router-link>
				<ul class="mb0">
					<li><span>place</span></li>
					<li class="second" id="addToCart" v-on:click="addCart(goodData)"><span>加入购物车</span></li>
					<li id="makeOrder"><span>马上下单</span></li>
				</ul>
			</div>
			<div class="placeholder"></div>
		</div>
	</div>
</template>
<script>
	import { mapGetters, mapActions } from 'vuex'
	import './productDetail.less'
	
	export default {
		computed: mapGetters({
			goodData: 'productDetail',
			cartCount: 'cartCount'
		}),
		methods: {
			...mapActions([
			    'getProductDetail',
			    'addCart'
			])
		},
		created (){
			console.log( 'this.$route', this.$route.params.id );
			this.$store.dispatch( 'getCarts' );
			this.$store.dispatch( 'getProductDetail', this.$route.params.id );
		},
		watch:{
		    // '$route': 'fetchData'
	    },
	    beforeRouteEnter (to, from, next) {
	    	console.log( 'getProductDetail', this );
	    	next();
	    }
	}
</script>




